<template>
  <view class="delete">
    <!-- 头部 -->
    <view class="topbox">
      <view class="top-top">
      </view>
      <view class="topitem">
        <view style="width: 20%;position: relative;">
          <image src="../../static/resort/fanhui.png" mode="" style="width: 18rpx;height: 36rpx;" @click="toreturn()">
          </image>
        </view>
        <view class="toptit">
          <view class="flex">
            <view class="text">
              删除群管理员
            </view>
            <!-- <image src="../../static/message/donotdisturb.png" mode="" class="lingdang"></image> -->
          </view>
        </view>
        <view class="right"
          :style="checked.indexOf(true) !== -1?'background-color: #FF2A31;':'background-color: #FFAAAD;'"
          @click="togroupgonggao">
          完成
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <view style="height: 100rpx;">

    </view>
    <view class="search1">
      <u-search placeholder="搜索" v-model="keyword" bgColor="#fff"></u-search>
    </view>
    <view class="peopleall">
      <view v-for="(item,index) in peopleList" :key="index" @click="checkDel(index)">
        <view class="people-flex">
          <view class="img" style="display: flex; align-items: center;">
            <image :src="item.img1" v-if="item.checked" style="width: 48rpx;height: 48rpx;" mode=""></image>
            <image :src="item.img" v-else mode="" style="width: 48rpx;height: 48rpx;"></image>
          </view>
          <view class="hend">
            <image :src="item.head" class="img1" mode=""></image>
            <image :src="item.sex" mode="" class="man"></image>
          </view>
          <view class="name">
            {{item.name}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        checked: [],
        keyword: '',
        show: "",
        peopleList: [{
            img1: "/static/message/checked-red.png",
            img: "/static/message/nonechecked.png",
            head: "/static/resort/video/img1.png",
            checked: false,
            sex: "/static/message/sex_woman.png",
            name: "AAA中国电信"
          },
          {
            img1: "/static/message/checked-red.png",
            img: "/static/message/nonechecked.png",
            checked: false,
            head: "/static/resort/video/img1.png",
            sex: "/static/message/sex_woman.png",
            name: "AAA中国电信",

          }, {
            img1: "/static/message/checked-red.png",
            img: "/static/message/nonechecked.png",
            checked: false,
            head: "/static/resort/video/img1.png",
            sex: "/static/message/sex_woman.png",
            name: "AAA中国电信"
          },
        ]
      };
    },
    // watch: {
    //   checked(item) {
    //     var checkedCount = this.checked.filter(item => {
    //       if (item == true) {
    //         return item
    //       }
    //     })
    //     console.log(checkedCount);
    //   }
    // },
    methods: {
      toreturn() {
        uni.navigateTo({
          url: '../message/groupManagementSettings',
        });
      },
      togroupgonggao() {
        uni.showModal({
          title: '确定删除管理员吗',
          cancelText: '取消',
          confirmText: '确定',
        });
      },

      checkDel(i) {
        // console.log(i);
        this.peopleList[i].checked = !this.peopleList[i].checked
        this.peopleList.forEach((item) => {
          this.checked.push(item.checked);
          // console.log(this.check);
        })

      }
    },
  }
</script>

<style lang="scss">
  .delete {

    // 头部
    .topbox {
      width: 100vw;
      background-color: white;
      position: fixed;
      z-index: 99;

      .top-top {
        width: 100%;
        height: var(--status-bar-height);
      }

      .topitem {
        border-bottom: solid 2rpx #E5E5E5;
        width: 100%;
        height: 110rpx;
        background-color: white;
        display: flex;
        padding: 20rpx 50rpx;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;

        .addfriend {
          position: absolute;
          top: 50rpx;
          left: 0;
          background-color: #505050;
          width: 240rpx;
          height: 220rpx;
          border-radius: 20rpx;

          .afone {
            color: white;
            height: 50%;
            width: 100%;
            text-align: center;
            font-size: 30rpx;
            line-height: 120rpx;
            border-bottom: solid #F5F5F5 2rpx;
          }

          .aftwo {
            color: white;
            height: 50%;
            width: 100%;
            text-align: center;
            font-size: 30rpx;
            line-height: 120rpx;
          }
        }

        .toptit {
          width: 60%;
          text-align: center;
          // margin: auto;

          .flex {
            margin-top: 10rpx;
            // border: 1px solid #505050;
            margin: auto;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;

            .text {
              font-size: 35rpx;
              margin-right: 10rpx;
              font-weight: 600;
            }

            .lingdang {
              width: 32rpx;
              height: 32rpx;
            }
          }

          .huise {
            font-size: 23rpx;
            color: #999;
          }
        }

        .right {
          border: 1rpx solid;
          color: #fff;
          padding: 10rpx 20rpx;
          border-radius: 15rpx;
        }
      }
    }

    // 头部
    .search1 {
      width: 90%;
      margin: 0 auto;
      padding: 5% 0;
    }

    .peopleall {
      background-color: #fff;
      padding: 3% 5%;


      .people-flex {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
      }

      .hend {
        margin: 0 15rpx 15rpx;
        // margin-right: 15rpx;
        height: 100rpx;
        position: relative;
        margin-bottom: 15rpx;

        .img1 {
          width: 100rpx;
          height: 100rpx;
        }

        .man {
          width: 28rpx;
          height: 28rpx;
          position: absolute;
          top: 85%;
          left: -5%;
        }
      }

      .name {
        font-size: 35rpx;
        width: 70%;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #ccc;
      }
    }
  }
</style>